<template>
  <div class="EventAnalysis">
    <h2>登陆统计</h2>
    <el-row :gutter="20">
      <el-col :span="8">
        <el-card class="card">
          <div class="titel">
            <div class="left">
              <div class="iconborder"><i class="el-icon-user-solid"></i></div>
              <span class="text"> 今日登陆人数 </span>
            </div>
            <div class="right">
              <p class="num">2518</p>
            </div>
          </div>
          <hr />
          <h3>2020-9-15</h3>
        </el-card>
      </el-col>
      <el-col :span="8">
        <el-card class="card">
          <div class="titel">
            <div class="left">
              <div class="iconborder"><i class="el-icon-date"></i></div>
              <span class="text">近七日登陆人数 </span>
            </div>
            <div class="right">
              <p class="num">2518</p>
            </div>
          </div>
          <hr />
          <h3>2020-9-15</h3>
        </el-card>
      </el-col>
      <el-col :span="8">
        <el-card class="card">
          <div class="titel">
            <div class="left">
              <div class="iconborder"><i class="el-icon-notebook-2"></i></div>
              <span class="text">总登陆人数 </span>
            </div>
            <div class="right">
              <p class="num">2518</p>
            </div>
          </div>
          <hr />
          <h3>2020-9-15</h3>
        </el-card>
      </el-col>
    </el-row>
    <el-card style="margin-top: 20px">
      <div class="searchBox">
        <h3>
          <div class="tt"></div>
          详情
        </h3>
        <div class="right">
          <span class="txt" style="margin-left: 10px">时间：</span>
          <el-date-picker
            size="small"
            v-model="timeArr"
            type="daterange"
            align="right"
            unlink-panels
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            :picker-options="timeOptions"
            value-format="yyyy-MM-dd"
            @change="focus"
          >
          </el-date-picker>
          <el-button class="btn" icon="el-icon-search" size="small"
            >查询搜索</el-button
          >
          <el-button icon="el-icon-paperclip" size="small">导出EXCEL</el-button>
        </div>
      </div>
      <el-table
        :data="tableData"
        style="width: 100%; margin-top: 10px"
        :header-cell-style="{ background: '#f5f7fa' }"
      >
        <template slot="empty">
          <el-empty :image-size="200"></el-empty>
        </template>
        <el-table-column prop="date" label="时间"> </el-table-column>
        <el-table-column prop="name" label="总计"> </el-table-column>
        <el-table-column prop="address" label="手机号登陆"> </el-table-column>
        <el-table-column prop="address" label="QQ登陆"> </el-table-column>
        <el-table-column prop="address" label="微信登陆"> </el-table-column>
        <el-table-column prop="address" label="苹果ID登陆"> </el-table-column>
        <el-table-column prop="address" label="平均登陆次数"> </el-table-column>
      </el-table>
      <pagination
        :total="total"
        :page.sync="page"
        :limit.sync="pageSize"
        @pagination="getList"
      />
    </el-card>
  </div>
</template>

<script>
import Pagination from "@/components/Pagination"; // 分页
export default {
  components: { Pagination },
  data() {
    return {
      timeArr: [],
      startTime: "",
      endTime: "",
      tableData: [],
      total: 0,
      page: 1,
      pageSize: 10,
      timeOptions: {
        disabledDate(platformValue) {
          return platformValue.getTime() > Date.now() - 8.64e6;
        },
        shortcuts: [
          {
            text: "最近一周",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 6);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近一个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近三个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit("pick", [start, end]);
            },
          },
        ],
      },
    };
  },
  methods: {
    focus() {
      if (!this.timeArr) {
        this.timeArr = [];
      }
      this.startTime = this.timeArr[0];
      this.endTime = this.timeArr[1];
    },
    getList() {},
  },
};
</script>

<style lang="less" scoped>
.EventAnalysis {
  padding: 20px;
  h2 {
    margin: 0 0 20px;
  }
  .card {
    .titel {
      display: flex;
      justify-content: space-between;
      align-items: center;
      .left {
        .iconborder {
          border: 5px solid #ccd4fe;
          border-radius: 50%;
          display: inline-block;
          i {
            border: 10px solid #7b94d8;
            border-radius: 50%;
            padding: 5px;
            color: #7b94d8;
          }
        }
        .text {
          margin-left: 10px;
          font-weight: 700;
          color: #7b94d8;
          font-size: 18px;
        }
      }
      .right {
        .num {
          font-size: 24px;
          font-weight: 800;
          color: #7e84a4;
        }
        p {
          text-align: right;
          margin: 10px 0;
          font-weight: 600;
        }
        .up {
          color: #41c49a;
        }
        .down {
          color: #fc512d;
        }
      }
    }
    hr {
      border: none;
      border-top: 1px solid #7b94d8;
    }
    h3 {
      margin: 0;
      color: #7b94d8;
    }
  }
  .searchBox {
    display: flex;
    justify-content: space-between;
    align-items: center;
    h3 {
      margin: 0;
      display: flex;
      align-items: center;
      .tt {
        display: inline-block;
        width: 5px;
        height: 18px;
        margin-right: 5px;
        background-color: #7b94d8;
      }
    }
    .right {
      display: flex;
      align-items: center;
    }
  }
}
</style>